<script setup lang="ts">
import { h, ref } from "vue";
import KSpace from "@/views/domain/kubeHud/views/k8s/components/KSpace.vue";
import { IconMetadata } from "@/views/domain/kubeHud/views/k8s/components/icons";
import BasicForm from "./BasicForm.vue";
import DeployPodEditForm from "./DeployPodEditForm.vue";
import { Deployment } from "@/views/domain/kubeHud/api/k8s/types";
import { newDeployment } from "@/views/domain/kubeHud/api/k8s/usage";
import YamlDialog from "../../components/YamlDialog.vue";
import { useDeploymentEditor } from "./createProvider";
type Prop = {
  type: string | "deployment" | "statefulSet" | "daemonSet";
};

const props = defineProps<Prop>();

const {
  dialogVisible,
  openDeploymentEditor,
  closeDeploymentEditor,
  editDeployment
} = useDeploymentEditor();

const currentTab = ref("metadata");
const formTabs = ref();

type TabItem = {
  name?: string;
  title?: string;
  subTitle?: string;
  icon?: any;
  component?: () => any;
};

const tabItems = ref<TabItem[]>([
  {
    name: "metadata",
    title: "基本信息",
    subTitle: "当前",
    icon: IconMetadata,
    component: () => h(BasicForm)
  },
  {
    name: "pod",
    title: "容器组设置",
    subTitle: "当前",
    icon: IconMetadata,
    component: () => h(DeployPodEditForm)
  }
]);

const changeToTab = (offset: number = 1) => {
  const index = tabItems.value.findIndex(
    item => item.name === currentTab.value
  );

  if (offset > 0 && index < tabItems.value.length - 1) {
    currentTab.value = tabItems.value[index + 1].name;
    formTabs.value.currentName = currentTab.value;
  } else if (offset < 0 && index > 0) {
    currentTab.value = tabItems.value[index - 1].name;
    formTabs.value.currentName = currentTab.value;
  }
};

defineExpose({
  open: () => {
    openDeploymentEditor();
  },
  close: () => {
    closeDeploymentEditor();
  }
});
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`Create ${props.type}`"
    destroy-on-close
    append-to-body
    top="5vh"
    width="80vw"
    modal
    body-class="dialog-body"
    class="dialog-wrapper"
  >
    <template #header>
      <div class="w-full flex justify-between">
        <span>新建: {{ props.type }}</span>
        <YamlDialog v-model:value="editDeployment" icon="Edit" link />
      </div>
    </template>
    <el-tabs
      ref="formTabs"
      v-model="currentTab"
      type="card"
      class="tab-wrapper"
      :before-leave="() => false"
    >
      <el-tab-pane
        v-for="tab in tabItems"
        :key="tab.name"
        :label="tab.title"
        :name="tab.name"
      >
        <template #label>
          <div class="w-32 flex items-center gap-2">
            <el-icon size="32">
              <IconMetadata />
            </el-icon>
            <KSpace direction="column">
              <span class="tab-head-title">{{ tab.title }}</span>
            </KSpace>
          </div>
        </template>
        <component :is="tab.component()" />
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <el-space>
        <el-button round type="default">取消</el-button>
        <el-button round type="default" @click="changeToTab(-1)">
          上一步
        </el-button>
        <el-button round type="info" @click="changeToTab(1)">下一步</el-button>
        <el-button round type="default">提交</el-button>
      </el-space>
    </template>
  </el-dialog>
</template>
<style lang="scss">
.dialog-wrapper {
  height: calc(100vh - var(--el-dialog-margin-top) * 3);
  display: flex;
  flex-direction: column;
  .el-dialog__header {
    height: 3rem;
    flex-shrink: 0;
  }

  .el-dialog__footer {
    height: 3rem;
    flex-shrink: 0;
  }

  .dialog-body {
    flex: 1;
    overflow-y: auto;
  }
}

.tab-wrapper {
  --el-tabs-header-height: 60px;
  height: 100%;
  .el-tabs__content {
    height: calc(100% - var(--el-tabs-header-height));
    overflow-y: auto;
  }
}

.header-tab-wrapper {
}

.tab-head-title {
  font-size: 16px;
  font-weight: bold;
}

.tab-head-subtitle {
  font-size: 12px;
  color: #999;
}
</style>
